<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Tooplate">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
          rel="stylesheet">

    <title>文物展览系统 - 文物评价管理</title>

    <!-- Additional CSS Files -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/owl-carousel.css">
    <link rel="stylesheet" href="/assets/css/tooplate-artxibition.css">

    <style>
        .management-header {
            background-color: #f8f9fa;
            padding: 20px 0;
            margin-bottom: 30px;
        }
        .search-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .evaluation-item {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            padding: 20px;
        }
        .rating {
            color: #ffc107;
        }
        .evaluation-content {
            border-left: 3px solid #8C1515;
            padding-left: 15px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
<!-- ***** Pre Header ***** -->
<div th:replace="Header"></div>

<!-- 管理页面头部 -->
<div class="management-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>文物评价管理</h2>
                <span>管理用户对文物的评价和反馈</span>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和统计区域 -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="search-box">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="form-control">
                                <option>所有文物</option>
                                <option>青铜器</option>
                                <option>陶瓷器</option>
                                <option>书画</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="form-control">
                                <option>所有评分</option>
                                <option>5星</option>
                                <option>4星</option>
                                <option>3星及以下</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" placeholder="搜索用户或评价内容...">
                    </div>
                    <div class="col-lg-2">
                        <button class="main-dark-button btn-block">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="row mb-4">
        <div class="col-lg-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h4 th:text="${totalEvaluations}">156</h4>
                    <p>总评价数</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <h4 th:text="${avgRating}">4.5</h4>
                    <p>平均评分</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h4 th:text="${todayEvaluations}">12</h4>
                    <p>今日新增</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <h4 th:text="${pendingReviews}">3</h4>
                    <p>待审核</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 评价列表 -->
    <div class="row">
        <div class="col-lg-12">
            <div th:each="evaluation : ${evaluations}" class="evaluation-item">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="relic-info">
                            <h6 th:text="${evaluation.relicName}">青铜鼎</h6>
                            <small class="text-muted" th:text="${evaluation.relicEra}">商代</small>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="user-info">
                            <strong th:text="${evaluation.userName}">张三</strong>
                            <br>
                            <small class="text-muted" th:text="${evaluation.createTime}">2024-01-15</small>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="rating">
                            <span th:each="i : ${#numbers.sequence(1, evaluation.rating)}">★</span>
                            <span th:each="i : ${#numbers.sequence(evaluation.rating + 1, 5)}">☆</span>
                            <br>
                            <small th:text="'(' + ${evaluation.rating} + '星)'">(5星)</small>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="evaluation-content">
                            <p th:text="${evaluation.content}">这个文物非常精美，体现了古代工匠的高超技艺...</p>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="action-buttons text-right">
                            <button class="btn btn-sm btn-success" th:if="${!evaluation.approved}">
                                <i class="fa fa-check"></i> 通过
                            </button>
                            <button class="btn btn-sm btn-danger">
                                <i class="fa fa-trash"></i> 删除
                            </button>
                            <span class="badge badge-success" th:if="${evaluation.approved}">已审核</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
        <ul>
            <li><a href="#">上一页</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">下一页</a></li>
        </ul>
    </div>
</div>

<div th:replace="footer"></div>

<!-- jQuery -->
<script src="/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="/assets/js/popper.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script src="/assets/js/scrollreveal.min.js"></script>
<script src="/assets/js/waypoints.min.js"></script>
<script src="/assets/js/jquery.counterup.min.js"></script>
<script src="/assets/js/imgfix.min.js"></script>
<script src="/assets/js/mixitup.js"></script>
<script src="/assets/js/accordions.js"></script>
<script src="/assets/js/owl-carousel.js"></script>
<!-- Global Init -->
<script src="/assets/js/custom.js"></script>

<script>
    $(document).ready(function() {
        // 评价管理页面初始化
        $('.btn-success').click(function() {
            $(this).closest('.evaluation-item').find('.badge').removeClass('d-none');
            $(this).hide();
        });
    });
</script>
</body>
</html>